<template>
  <div class="my-shiplist-container">
    <div class="list-content">
      <div
        v-for="(item, index) in shipList"
        :key="item.id"
        class="list-item table-row"
        @click="shipClick(item)"
      >
        <div class="table-cell" style="width: 30px">{{ index + 1 }}</div>
        <div class="table-cell" style="width: 80px">
          <el-tooltip :content="item.shipName" placement="top">
            <span>{{ item.shipName }}</span>
          </el-tooltip>
        </div>
        <div class="table-cell">
          <el-tooltip :content="item.tenantName" placement="top">
            <span>{{ item.tenantName }}</span>
          </el-tooltip>
        </div>
        <!-- <div class="table-cell">
          <el-tooltip :content="getNaviInfo(item)" placement="top">
            <span>{{ getNaviInfo(item) }}</span>
          </el-tooltip>
        </div>
        
        <div class="table-cell">
          <el-tooltip :content="getShipStatus(item.shipStatus)" placement="top">
            <span>{{ getShipStatus(item.shipStatus) }}</span>
          </el-tooltip>
        </div>
        <div class="table-cell">
          <el-tooltip :content="getCargoInfo(item)" placement="top">
            <span>{{ getCargoInfo(item) }}</span>
          </el-tooltip>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    shipList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      listShow: false,
    };
  },
  mounted() {
    // this.getMyShipList();
  },
  methods: {
    shipClick(item) {
      this.$emit("ship-click", item);
    },
    getCargoInfo(shipInfo) {
      let cargoInfo = "";
      if (shipInfo.cargoName) {
        cargoInfo += shipInfo.cargoName;
      }
      if (shipInfo.cargoWeight) {
        cargoInfo += shipInfo.cargoWeight + "吨";
      }
      if (!cargoInfo) {
        cargoInfo = "----";
      }
      return cargoInfo;
    },
    getShipStatus(status) {
      return status == 0 ? '空载' : '重载'
    },
    getNaviInfo(shipInfo) {
      return shipInfo.departurePort && shipInfo.destinationPort
        ? shipInfo.departurePort + "-" + shipInfo.destinationPort
        : "----";
    },
    getMyShipList() {
    //   getMyShips().then((res) => {
    //     if (res.result && res.result.length > 0) {
    //       this.shipList = res.result;
    //       this.myShipIds = this.shipList.map((val) => {
    //         return val.shipId;
    //       });

    //       this.$emit("ship-loaded", this.myShipIds);
    //     }
    //   });
      // return new Promise((resolve, reject) => {
      //   const list = [];
      //   for (let index = 0; index < 5; index++) {
      //     list.push({
      //       id: "10000" + index,
      //       name: "船舶" + (index + 1),
      //       status: "在航",
      //       naviInfo: "青岛-上海",
      //       goods: "煤炭10吨",
      //     });
      //   }
      //   resolve({
      //     data: list,
      //   });
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-shiplist-container {
  width: 450px;
  box-shadow: 0px 2px 6px 0px rgba(64, 100, 197, 0.35);
  border-radius: 3px;
  background: #ffffff;
//   padding: 0 13px;
  .list-content {
    // border-top: 1px solid #d8d8d8;
    // padding: 0px 20px 20px 20px;
    max-height: 500px;
    overflow: auto;
    display: table;
    width: 100%;
    border-collapse: collapse;

    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }
    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 20px;
    }
    &::-webkit-scrollbar {
      width: 6px;
      height: 10px;
    }

    .table-row {
      display: table-row;
      .table-cell {
        display: table-cell;
        padding: 30px 0;
      }
    }

    .list-item {
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      border-bottom: 1px solid #F5F5F5;
      text-align: center;

      &:last-child {
        border-bottom: none;
      }
      div {
        // width: 90px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
